<!--测试获取后台接口省市区县-->
<template>
  <div>
    <div class="container">
      <div class="test">
        <el-select v-model="value" placeholder="请选择" @change="change">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select v-model="value2" placeholder="请选择" @change="change2">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select v-model="value3" placeholder="请选择" @change="change3">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select v-model="value4" placeholder="请选择">
          <el-option
            v-for="item in options4"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HotCompany',
  data () {
    return {
      options: [],
      options2: [],
      options3: [],
      options4: [],
      value: '',
      value2: '',
      value3: '',
      value4: ''
    }
  },
  methods: {
    change (id) {
      const that = this
      this.$ajax.get('api/api/v1/region/city', {
        params: {
          province_id: id
        }
      }).then((res) => {
        const data = res.data.data
        that.options2 = data
        data.forEach((value, index) => {
          that.options2[index].value = value.city_id
          that.options2[index].label = value.city_name
        })
      })
    },
    change2 (id2) {
      const that = this
      this.$ajax.get('api/api/v1/region/county', {
        params: {
          city_id: id2
        }
      }).then((res) => {
        const data = res.data.data
        that.options3 = data
        data.forEach((value, index) => {
          that.options3[index].value = value.county_id
          that.options3[index].label = value.county_name
        })
      })
    },
    change3 (id3) {
      const that = this
      this.$ajax.get('api/api/v1/region/village', {
        params: {
          town_id: id3
        }
      }).then((res) => {
        const data = res.data.data
        that.options4 = data
        data.forEach((value, index) => {
          that.options4[index].value = value.village_id
          that.options4[index].label = value.village_name
        })
      })
    },
    getProvince () {
      const that = this
      this.$ajax.get('api/api/v1/region/province').then((res) => {
        const data = res.data.data
        that.options = data
        data.forEach((value, index) => {
          that.options[index].value = value.province_id
          that.options[index].label = value.province_name
        })
      })
    }
  },
  mounted () {
    this.getProvince()
  }
}
</script>

<style lang="scss" scoped>
.test {
  padding: 300px;
}
</style>
